<template>
  <div class="teacher">
    <h3>讲师管理</h3>
    <div class="toolbar">
      <el-button type="danger" size="small" icon="el-icon-plus" @click="$router.push('add')">添加</el-button>
      <el-form inline :model="searchForm" size="small" @submit.native.prevent>
        <el-form-item prop="name">
          <el-input type="search" v-model="searchForm.name" placeholder="请输入教师姓名" suffix-icon="el-icon-search" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-iocn-search" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <xu-table :data="tableData" :options="tableOptions" :pager="pager" :loading="loading">
      <template slot="avatar" slot-scope="{ row }">
        <el-avatar :src="row.avatar" />
      </template>
    </xu-table>
  </div>
</template>

<script>
import { TeacherActionsEnum } from '../../../_/vue/store/teacher'
import table from '../../../mixins/table'
import { mapActions } from 'vuex'
export default {
  mixins: [table],
  data () {
    return {
      tableOptions: [
        { attrs: { label: '序号', prop: 'id', type: 'index', align: 'center', width: '80px' } },
        { attrs: { label: '头像', prop: 'avatar', align: 'center', width: '80px' } },
        { attrs: { label: '姓名', prop: 'name', align: 'center', width: '120px' } },
        { attrs: { label: '座右铭', prop: 'slogan' } },
        {
          attrs: { label: '操作', prop: 'createTime', width: '180px', align: 'center' },
          buttons: [
            {
              label: '编辑',
              icon: 'el-icon-edit',
              click: ({ row }) => {
                this.$router.push({ path: 'add', query: { id: row.id } })
              }
            },
            {
              label: '删除',
              type: 'popover',
              icon: 'el-icon-delete',
              click: async ({ row }) => {
                await this.delete({ ids: [row.id] })
                this.getData()
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      list: TeacherActionsEnum.LIST,
      delete: TeacherActionsEnum.DELETE
    })
  }
}
</script>
